<template>
    <div class="carousel">
        <div class="left_btn" @click="toLeft()" v-if="btn">
            <i class="bi bi-chevron-compact-left"></i>
        </div>
        <div class="right_btn" @click="toRight()" v-if="btn"> 
            <i class="bi bi-chevron-compact-right"></i>
        </div>
        <div class="progress" v-if="progress">
            <div class="group" @click="jumpToBar(1)">
                <div class="bar" v-if="defIndex >=1"></div>
            </div>
            <div class="group" @click="jumpToBar(2)">
                <div class="bar" v-if="defIndex >=2"></div>
            </div>
            <div class="group" @click="jumpToBar(3)">
                <div class="bar" v-if="defIndex >=3"></div>
            </div>
        </div>
        <div class="img_box" ref="box">
            <slot></slot>
        </div>
        
    </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue';
export default {
    name:'g-carousel',
    props:{
        // 进度条是否显示
        progress:{
            type:Boolean,
            default:true
        },
        // 左右轮播按钮是否显示
        btn:{
            type:Boolean,
            default:true
        },
        // 轮播间隔
        delay:{
            type:Number,
            default:5000
        }
    },
    setup(props){
        let defIndex = ref(0);
        let box = ref(null);
        let progress = ref(props.progress);
        let btn = ref(props.btn);
        let delay = ref(props.delay);

        defIndex.value = 1;

        // 自动轮播计时器
        let setInt = setInterval(() => {
            right(defIndex);
        }, delay.value);


        // 通过底部进度条跳转
        let jumpToBar = (index)=>{
            defIndex.value = index;
            box.value.style.transform = "translateX(-"+((defIndex.value-1)*100)+"%)";
            clearInterval(setInt);
            setInt = setInterval(()=>{
                right(defIndex)
            },delay.value)
        }
        // 向左轮播
        let toLeft = ()=>{
            if(defIndex.value == 1){
                defIndex.value = 3
            }else{
                defIndex.value = defIndex.value-1;
            }
            box.value.style.transform = "translateX(-"+((defIndex.value-1)*100)+"%)";
            clearInterval(setInt);
            setInt = setInterval(()=>{
                right(defIndex)
            },delay.value)
        }
        // 向右轮播
        let toRight = ()=>{
            right(defIndex)
            // 清楚并重新设定定时器
            clearInterval(setInt);
            setInt = setInterval(()=>{
                right(defIndex)
            },delay.value)
        }
        // 向右轮播通用方法
        function right(defIndex){
            if(defIndex.value == 3){
                defIndex.value = 1
            }else{
                defIndex.value = defIndex.value+1;
            }
            box.value.style.transform = "translateX(-"+((defIndex.value-1)*100)+"%)";
            
        }

        return{
            // 变量
            defIndex,
            box,
            progress,
            btn,
            // 方法
            toLeft,
            toRight,
            jumpToBar
        }
        

    }
}
</script>
<style>
    .carousel{
        width: 100%;
        height: 600px;
        background-color: rgba(0, 0, 0, 0.3);
        position: relative;
        overflow: hidden;
    }
    .carousel .left_btn{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5%;
        color: white;
        font-weight: 900;
        font-size: 50px;
        cursor: pointer;
        z-index: 99;
    }
    .carousel .right_btn{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 5%;
        color: white;
        font-weight: 900;
        font-size: 50px;
        cursor: pointer;
        z-index: 99;
    }
    .carousel .left_btn>i,
    .carousel .right_btn>i{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .carousel .progress{
        width: 100px;
        height: 4px;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(1px,3px);
        column-gap: 5px;
    }
    .carousel .group{
        background-color: rgb(255, 255, 255,0.4);
        cursor: pointer;
    }
    .carousel .bar{
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
    }
    
    .carousel .img_box{
        position: relative;
        display: grid;
        grid-template-columns: repeat(3,100%);
        grid-template-rows: repeat(1,1fr);
        transform: translateX(0%);
        transition: all .6s;
        min-width: 1300px;
        height: 100%;
        width: 100%;
    }
    .carousel .img_box>div{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .carousel .img_box>div img{
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        
    }
</style>